class: left, middle

.pull-left[ ### We Will

.pull-right[ ### We Won’t - Learn all of CSS/HTML/JS.
That’s not realistic.] — class: inverse, center, middle

Introduction to HTML

Tags Tags Tags Tags

An HTML element is defined by a start tag, some content, and an end tag.

<html> is for the root document
<head> is for meta information
<p> is for paragraphs
<audio> is for (lol take a guess)

.left[:scale 80%]

Today’s Special

Since we don’t want to care about all the 132 tags today, here’s what you want to read up on:

–

–

–

–

Do not use <div> to render just text. This is dirty:

<div> This is my title </div> <!-- Don't -->
But Amannnnn, you ask, why can’t I use <div> everywhere?

Developing for accessibility

Not everyone browses websites like you do. Semantic HTML helps structure web pages in a way such that people with disabilities (and even those without) can still use them.

While there’s a lot of learn in accessibility, the only rule you need to keep in mind right now is

A place for everything and everything in its place

For instance, the <div> and <span> elements tell nothing about their content.
While elements such as <form>, <table> and <article> clearly state what it’s content is meant to display within their tags.

The prior tags are non-semantic; the later tags are semantic.

CSSssssssss

CSS is all about targeting HTML elements that we write and styling them. It is pretty simple to understand most of the time. See if you can understand what this does:

<div id="george">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li> List Item 2</li>
   </ul>

   <ul>
      <li> List Item 3</li>
      <li> List Item 4</li>
   </ul>   
</div>
#george {
  background: #e3e3e3;
  border-style: dotted;
  border-color: red;
}

My paragraph here.

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

.left[:scale 80%]
class: inverse, middle, center
# Take a sad site and make it sadder

Hey Jude

By the end of this short exercise, you will have a sh*tty website on the internet. Lets go.

I have this stupid website:

.left[:scale 80%]

Can we make it look worse?

Maybe this?

.left[]

Anything really. Go.

class: inverse, middle, center

Wait but how do I give you the file?

I’m glad you asked. Let’s Git to it.

  1. First, copy this link below:
https://github.com/thedivtagguy/activity1

  1. Now open VSCode and press Ctrl + Shift + P and search for Clone.

  2. Paste in the URL and press Enter. You will be prompted to select a location.

  3. Open the cloned files.

You just used Git to fetch from a remote source to your local machine!

In the next part, we will launch this crap into space. First add some ✨ styles to the files.✨

Time: 10 Minutes

Here are some sample properties to try

.pull-left[

  • padding: 10px;

  • font-size: 15px;

  • font-weight: bold;

  • background-color: #c7980b;

  • border: solid ]

.pull-right[

  • border-width: 3px;

  • color: #423e34;

  • margin-top: 40px;

  • font-family: sans-serif

]

# Houston, we’re ready for takeoff.
Open up a new terminal in VS Code. Type in the following code:
```js git init // This initializes a new git repository on your machine
git add -A // Every time you want to save a new version, you have to add all files to this verion
git commit -m “My First Commit” // The commit command saves the version with a message to help you keep track of things ```

Now go to Github and create a new repo. After you give it a name, copy the line that looks like this and paste it in your terminal:

git remote add origin github.com/thedivtagguy/activity1.git // This is connecting your local copy to this Github repository
Finally, write this and press Enter:
```js
git push -u -f origin master
```

Netlify and Chill

To host our website, we’ll use a service called Netlify. It is a static site hosting service, which means as long as our website doesn’t have a database, we can host it for free, forever.

  1. Go to Netlify.com and login with your Github account

  2. Add a new site. In the options, choose ‘Import Existing Project’

  3. Select Github and search for the repository you just created

  4. Click deploy

In a few minutes, your website will be online with a silly looking URL.

But see, here’s the cool part. Go back to VS Code and make some changes to the text. After you’re done, create a new commit like so:

git add -A
git commit -m "Change of text"
git push

class: inverse, middle, center

# Cool, now go back to your URL

Git-based deployment

Since your Netlify site is connected to your Github repository, every time you push a new commit to your repository, Netlify will rebuild your website and put the new version up online.

This is very useful and as we go deeper into using modern web-development frameworks, you’ll see why this is one of the best ways of working on a project.

.left[]

background-image: url(https://github.com/yihui/xaringan/releases/download/v0.0.2/karl-moustache.jpg) background-position: 50% 50% class: center, bottom, inverse

# But can we make this look prettier?

Weird flex but okay

Most of the websites we made right now, a few moments ago, are just elements stacked on top of each other. What if we learn how to arrange stuff on the page so that it looks better?

Maybe like this:

.left[]

This is where flexbox comes in.

class: inverse, middle, center

# Game time #1

To understand how flexbox works, we’ll play a game called Flexbox Froggy. It sounds lame but hear me out:

Its got frogs. Lets play.

Gururaja has entered the chat 

flexboxfroggy.com

#### Time: 20-25 Minutes

class: inverse, middle, center

# Shall we?

class: inverse, middle, center

# Game time #2

Pick me

Till now, you’ve used CSS to select elements by classes or IDs. This is useful but CSS has many different ways of allowing you to select objects. It is important to get an understanding of this before we move further.

To do this, we’ll play yet another game.

Head over to https://flukeout.github.io/ and get started.

There are 32 levels, but you only need to get till level 10-12.

#### Time: 15-20 Minutes

class: inverse, middle, center

# Yeah you’re so done now, I can see it.

Quick Recap

You’re now armed with the knowledge of:

  1. Tags
  2. CSS Selectors
  3. CSS Flexbox
  4. Developing in VS Code
  5. Pushing and pulling from remote and loval repositories with Git

  6. Deploying to Netlify

    Activity 2

You’ll never be asked to design the abomination you made in the earlier activity. However, being asked to code a UI screen is extremely likely. If you’re interested in developing the earlier skills further, here’s a challenge.

I’ve designed a product page in Figma and coded the bare, unstyled HTML for it. Can you apply CSS so that the HTML looks like the design file?

Files are at

https://github.com/thedivtagguy/activity2

To summarize the summary

  1. Clone the repo on your machine
  2. Look at the design and try to use your knowledge of CSS selectors and flexbox to recreate it

Note: You will still have to Google what other CSS properties you need to use. Ask questions like ‘How do I make the buttons rounded?’ or ‘How do I change the font?’ and Google them. Lather, rinse, repeat.

  1. Push your files to Github

  2. Deploy this new repository to Netlify.

    background-image: url(images/all.jpg) background-size: 1000px background-position: 50% 50%